<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>海报分享 FRM</title>
    <link href="../Ryancss/share_poster/bootstrap.css" rel="stylesheet" />
    <link href="../Ryancss/share_poster/swiper.css" rel="stylesheet" />
    <style>
        #my_code { position: absolute; z-index: 99; top: 40.1%; left: 31%; width: 38%; }
        #my_code canvas { width: 100%; height: auto; }
        .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { bottom: -30px; left: 0; width: 100%; }
        .swiper-container { margin: 0 auto; overflow: hidden!important; z-index: 1; /* background: linear-gradient(to right,#f370af 0,#5515ee 100%);*/ }
        .swiper-pagination-bullet { width: 15px; height: 8px; border-radius: 8px; }

        .footer { z-index: 2; position: fixed; bottom: 0; display: block; width: 100%; height: 100px; /*border-top: 1px solid #f0f0f0; */}
        .bt1 { display: inline-block; width: 90%; background: linear-gradient(to right,#f0ad4e ,#ef554e);text-align: center; height: 40px; line-height: 40px; border-radius: 25px; color: #ffffff; font-size: 12px; margin-top: 10px; }
        .bt2 { display: inline-block; width: 90%; background: linear-gradient(to right,#555555,#000000); text-align: center; height: 40px; line-height: 40px; border-radius: 25px; color: #ffffff; font-size: 12px; margin-top: 10px; }
        .my_code { position: absolute; width: 27%; height: 18%; bottom: 6.7%; left: 36.5%; }
        .my_code canvas { height: 100%; width: 100%; }

        .box { display: inline-block; width: 80%; position: relative; }
    </style>
</head>
<body>
    <div class="swiper-container" style="margin-top:30px">
        <div class="swiper-wrapper">
		
		
		
            <div class="swiper-slide text-center">
                <div class="box" >
                    <img src="" style="border-radius: 20px; height:auto;width:100%" /> 
                    <div class="my_code"></div>
                </div>
            </div>
			
			
			
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <div class="footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-6 text-center" onclick="FenXiang(0)" tapmode="cb">
                    <span class="bt1">分享海报</span>
                </div>
                <div class="col-xs-6 text-center" onclick="totuandui()" tapmode="cb">
                    <span class="bt2 down2">我的团队</span>
               
                </div>
            </div>
        </div>
    </div>
</body>


<script type="text/javascript" src="../Ryanjs/share_poster/jquery-1.11.1.js"></script>
<script type="text/javascript" src="../Ryanjs/share_poster/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="../Ryanjs/share_poster/api.js"></script>
<script type="text/javascript" src="../Ryanjs/share_poster/swiper.js"></script>
<script type="text/javascript" src="../Ryanjs/share_poster/html2canvas.js"></script>

<script type="text/javascript">
	  var api_url = localStorage.getItem('api_url');
	  var dwzapi = '';
	  var host = '';
	  
    var pic_num = 0;
//    var fxurl = '';
    var title = '';
    var description = '';
    var img = '';
    var mySwiper;
    apiready = function(){
	
	
		
       GetContent();
	
	
	
											// 网络状态
								api.addEventListener({
									name:'offline'
								}, function(ret, err){        

									api.toast({
									msg : '网络连接异常',
									duration : 5000,
									location : 'middle' 
									});

									  

								});

								api.addEventListener({
									name:'online'
								}, function(ret, err){        
								
									  api.toast({
									  msg : '已经连接网络',
									  duration : 2000,
									  location : 'middle' 
									  });
										  
       GetContent();
										  
								});		
		
	
	/*
  //定时检测邀请码
  var timer = setInterval(function(){
 //     DataLoading();
GetContent();
			
	 },1000)	

	*/
    };
	
	




function loadImg(ele_) {
var thumbnailBoolean=api.systemType=='ios'?false:true,
dataurl = $api.attr(ele_, 'data-src');
if (dataurl) {
api.imageCache({
url: dataurl,
thumbnail:false
}, function(ret, err) {
if (ret) {
if (ret.status) {
// console.log(ret.url);
ele_.src = ret.url;
$api.removeCls(ele_, 'lazy');
$api.addCls(ele_, 'imgloaded');

// src赋值，也会触发onload，防止循环执行必须移除对应属性
$api.removeAttr(ele_, 'data-src');
$api.removeAttr(ele_, 'onload');
}
} else {
alert(JSON.stringify(err));
}
});

}
}







    function GetContent() {
	
	/*   api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '数据加载中',
            modal: true
        });
		
		*/
          api.ajax({
			  url: api_url+'/login/login/share_poster_frm.html',
              method: 'get',
              data: {
                  values: {
					  uid: localStorage.getItem('user_id'),
                      key: 'ikmovie.xyz'   //安全码
                  }
              }
          }, function (ret, err) {
		  

			
				
				 dwzapi = ret.msg['dwzapi'];  //短网址
				 host = ret.msg['host'];  //当前域名
				 app_Invitation_slogans = ret.msg['app_Invitation_slogans'];  //邀请标语 
				
		
	
			//	fxurl = 'http://mk.ikmovie.xyz';
				title = '爱看资源网';
				description = '爱看资源网 这只是开始';
				img = '微信分享图片地址';
				
						 
                var count = ret.r.length;
                var ccc = 0;
                var imgs = [];
				var timestamp = new Date().getTime()

				
                for (var i in ret.r) {
		
				
                    api.download({
                        url: ret.r[i], 
                        savePath: 'fs://' + timestamp + i + '.png',
					//	savePath: 'fs://PerfectNetService'+i+'.jpeg',
						report: true,
						cache: true,
						allowResume: true
                    }, function (ret, err) {
                        if (ret.state == 1) {
                            imgs.push(ret.savePath);
                            ccc++;
                            if (ccc >= count) {
                                var _html = '';
								
								
								
                                for (var j in imgs) {
                                    _html += '<div class="swiper-slide text-center">\
                                    <div class="box" id="Img'+ j + '">\
                                       <img class="lazy" data-src="' + imgs[j] + '" src="' + imgs[j] + '" onload="loadImg(this);"  style="border-radius: 20px; height:auto;width:100%"/>\
                                        <div class="my_code"></div>\
                                    </div>\
                                </div>';
                                }
                                $('.swiper-wrapper').html(_html);
                                $('.my_code').qrcode(dwzapi);
                                mySwiper = new Swiper('.swiper-container', {
                                    pagination: '.swiper-pagination',
                                    effect: 'coverflow',
                                    grabCursor: true,
                                    centeredSlides: true,
                                    slidesPerView: 'auto',
                                    coverflow: {
                                        rotate: 50,
                                        stretch: 0,
                                        depth: 800,
                                        modifier: 1,
                                        slideShadows: true
                                    }
                                })
                                api.hideProgress();
								
								
												
								api.toast({
									msg: "加载成功",
									duration: 2000,
									location: 'middle'
								});
								
								

                            }
                        }
                    });
                };  
      
        });
		
		
		
		
		
		
    };

    //var mySwiper = new Swiper('.swiper-container', {
    //    pagination: '.swiper-pagination',
    //    effect: 'coverflow',
    //    grabCursor: true,
    //    centeredSlides: true,
    //    slidesPerView: 'auto',
    //    coverflow: {
    //        rotate: 50,
    //        stretch: 0,
    //        depth: 800,
    //        modifier: 1,
    //        slideShadows: true
    //    },
    //    onSlideChangeEnd: function (swiper) {
    //        pic_num = swiper.activeIndex;
    //    }
    //});


    function FenXiang(tag) {
        var dialogBox = api.require('dialogBox');
        dialogBox.actionMenu({
            rect: {
                h: 200
            },
            texts: {
                cancel: '取消'
            },
            items: [
            {
                text: '微信好友',
                icon: 'widget://Ryanimg/share_poster/weifriend.png'
            },
            {
                text: '朋友圈',
                icon: 'widget://Ryanimg/share_poster/friend.png'
            }],
            styles: {
                bg: '#FFF',
                column: 2,
                itemText: {
                    color: '#000',
                    size: 14,
                    marginT: 8
                },
                itemIcon: {
                    size: 30
                },
                cancel: {
                    bg: '#F6F6F6',
                    color: '#000',
                    h: 50,
                    size: 14
                }
            },
            tapClose: true,
        }, function (ret) {
            if (ret.eventType == "cancel") {
                dialogBox.close({
                    dialogName: 'actionMenu'
                });
            }
            if (ret.eventType == "click") {
                if (ret.index == 0) {
                    if (tag == 0) {
                        CanvasImg(0);
                    } else {
                        ShareUrl(title, description, img, dwzapi,0);
                    }
                } else if (ret.index == 1) {
                    if (tag == 0) {
                        CanvasImg(1);
                    } else {
                        ShareUrl(title, description, img, dwzapi, 1);
                    }
                } else if (ret.index == 2) {
                    if (tag == 0) {
                        CanvasImg(2);
                    } else {
                        ShareUrl(title, description, img, dwzapi, 2);
                    }
                } else if (ret.index ==3) {
                    if (tag == 0) {
                        CanvasImg(3);
                    } else {
                        ShareUrl(title, description, img, dwzapi, 3);
                    }
                }
            }
        });
    }

    function CanvasImg(tag) {
        pic_num = mySwiper.activeIndex;
        var canvas2 = document.createElement("canvas");
        var _canvas = $('.swiper-slide').eq(0);
        var w = parseInt(_canvas.width);
        var h = parseInt(_canvas.height);
        //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
        canvas2.width = w * 2;
        canvas2.height = h * 2;
        canvas2.style.width = w + "px";
        canvas2.style.height = h + "px";
        //可以按照自己的需求，对context的参数修改,translate指的是偏移量
        //  var context = canvas.getContext("2d");
        //  context.translate(0,0);
        var context = canvas2.getContext("2d");
        context.scale(2, 2);
        console.log(pic_num);
        html2canvas(document.querySelector('#Img'+pic_num), { canvas: canvas2 }).then(function (canvas) {
            //document.body.appendChild(canvas);
            //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
            base64Str = canvas.toDataURL('image/jpeg').replace("data:image/jpeg;base64,", "");
            var trans = api.require('trans');
            trans.saveImage({
                base64Str: base64Str,
                imgPath: "fs://share/",
                imgName: pic_num+'.jpg',
            }, function (ret, err) {
                if (ret.status) {
                    ShareImg(tag, "fs://share/"+ pic_num+'.jpg');
                } else {
                    api.toast({
                        msg: '图片初始化失败',
                        duration: 2000,
                        location: 'bottom'
                    });
                }
            });

        });
    }
	
	
	//分享//tag 0微信好友 1朋友圈 2QQ好友 3QQ 空间
function ShareUrl(_title, _description, _img, _url, tag) {
    var wx = api.require('wx');
    var qq = api.require('QQPlus');

    if (tag == 0) {
        api.download({
            url: _img,
            cache: false,
        }, function (ret, err) {
            if (ret.state == 1) {
                wx.shareWebpage({
                    scene: 'session',
                    title: _title,
                    description: _description,
                    thumb: ret.savePath,
                    contentUrl: _url
                }, function (ret, err) {
                    if (ret.status) {
                        api.toast({
                            msg: "分享成功",
                            duration: 2000,
                            location: 'middle'
                        });
                    };
                });
            }
        });
    };
    if (tag == 1) {
        api.download({
            url: _img,
            cache: false,
        }, function (ret, err) {
            if (ret.state == 1) {
                wx.shareWebpage({
                    scene: 'timeline',
                    title: _title,
                    description: _description,
                    thumb: ret.savePath,
                    contentUrl: _url
                }, function (ret, err) {
                    if (ret.status) {
                        api.toast({
                            msg: "分享成功",
                            duration: 2000,
                            location: 'middle'
                        });
                    };
                });
            }
        })
    };
    if (tag == 2) {
        qq.shareNews({
            url: _url,
            title: _title,
            type: 'QFriend',
            description: _description,
            imgUrl: _img
        }, function (ret, err) {
            if (ret.status) {
                api.toast({
                    msg: "分享成功",
                    duration: 2000,
                    location: 'middle'
                });
            } else {
                api.toast({
                    msg: "分享失败" + err.msg,
                    duration: 2000,
                    location: 'middle'
                });
            }
        });
    };
    if (tag == 3) {
        qq.shareNews({
            url: _url,
            title: _title,
            type: 'QZone',
            description: _description,
            imgUrl: _img
        }, function (ret, err) {
            if (ret.status) {
                api.toast({
                    msg: "分享成功",
                    duration: 2000,
                    location: 'middle'
                });
            } else {
                api.toast({
                    msg: "分享失败" + err.msg,
                    duration: 2000,
                    location: 'middle'
                });
            };
        });
    };
    if (tag == 4) {
        var clipBoard = api.require('clipBoard');
        clipBoard.set({
            value: _title + "【" + _description + "】" + _url
        }, function (ret, err) {
            if (ret) {
                api.toast({
                    msg: "复制成功，粘贴给好友",
                    duration: 2000,
                    location: 'middle'
                });
            } else {
                api.toast({
                    msg: "复制失败" + err.msg,
                    duration: 2000,
                    location: 'middle'
                });
            }
        });
    };
};

//tag 0微信好友 1朋友圈 2QQ好友 3QQ 空间
function ShareImg(tag, img, fun) {
    var _fun = fun || function () { };
    var wx = api.require('wx');
    var qq = api.require('QQPlus');
    var share_text = '';
    //微信好友
    if (tag == 0) {
        wx.shareImage({
            scene: 'session',
            contentUrl: img
        }, function (ret, err) {
            if (ret.status) {
                api.toast({
                    msg: "分享成功",
                    duration: 2000,
                    location: 'middle'
                });
            };
        });
    };
    if (tag == 1) {
        wx.shareImage({
            scene: 'timeline',
            contentUrl: img
        }, function (ret, err) {
            if (ret.status) {
                api.toast({
                    msg: "分享成功",
                    duration: 2000,
                    location: 'middle'
                });
            };
        });
    };
    if (tag == 2) {
        qq.shareImage({
            title: name,
            description: share_text,
            imgPath: img,
            type: 'QFriend',
        }, function (ret, err) {
            if (ret.status) {
                api.toast({
                    msg: "分享成功",
                    duration: 2000,
                    location: 'middle'
                });
            } else {
                api.toast({
                    msg: "分享失败" + err.msg,
                    duration: 2000,
                    location: 'middle'
                });
            }
        });
    };
    if (tag == 3) {
        qq.shareImage({
            title: name,
            description: share_text,
            imgPath: img,
            type: 'QZone',
        }, function (ret, err) {
            if (ret.status) {
                api.toast({
                    msg: "分享成功",
                    duration: 2000,
                    location: 'middle'
                });
            } else {
                api.toast({
                    msg: "分享失败" + err.msg,
                    duration: 2000,
                    location: 'middle'
                });
            };
        });
    };
}
	
	
	
	
	  
    
      function totuandui(){


        api.openWin({
            name: 'tuandui_win',
            url: 'tuandui_win.html', 
        });
		

    }
	
	
	
	
	
	
	
	
	
</script>
</html>